<template>
  <div>测试组件</div>
  <hr />
  <div>
    获取Store中user模块的getters: {{ $store.getters["user/formatNickname"] }}
  </div>
  <button @click="handleClick">点击</button>
  <h1>vuex中的数据{{ store.state.count }}</h1>
  <button @click="changeStoreCount">改变vuex数据</button>
</template>

<script lang="ts">
export default {
  name: "TestVuex",
};
</script>
<script lang="ts" setup>
// 按需引入useStore()方法
import { useStore } from "vuex";

// this.$store.state.info
// Vue3中store类似于Vue2中this.$store
const store = useStore();
console.log(store.state.user.profile.nickname);
// 修改nickname的值
const handleClick = () => {
  // 触发mutations，用于同步修改user模块state的信息
  // store.commit('updateNickname', 'Jackson')
  store.dispatch("user/updateNickname", "Yee2");
};
const changeStoreCount = () => {
  // 在这里提交了mutations中的addCount方法
  store.commit("addCount", 1);
};
</script>

<style scoped></style>
